define([
  'views/View',
  'views/internals/FamiliarsList',
  'hbs!template/internals/user-detail',
  'bootstrap_tabs'
], function(View, FamiliarsList, template){
  
  var UserDetail = View.extend({
    events: {
      "click button[name=back]":        "back",
      "click a[name=showFamiliars]":    "showFamiliars"
    },
    
    initialize: function(options) {
      View.prototype.initialize.call(this, options);
      this.template = template;
      this.model.bind("change", this.render, this);
      //this.model.familiars.bind("reset", this.renderFamiliars, this);
      // Flag to render the familiars list in the template
      this.showFamiliar = false;

      //this.model.familiars.bind("reset", this.render, this);
    },

    render: function() {
      View.prototype.render.call(this);
      if(this.showFamiliar) {
        this.familiarsView = new FamiliarsList({el: "#familiars", messages: this.messages, model: this.model, collection: this.model.familiars});
        //this.renderFamiliars();
      }
      return this;
    },
    
    /*renderFamiliars: function() {
      var familiarsView = new FamiliarsList({messages: this.messages, model: this.model, collection: this.model.familiars});
      this.$("#familiars").html(familiarsView.render().el);
    },*/
    
    showFamiliars: function() {
      console.log("Show familair");
      this.showFamiliar = !this.showFamiliar;
      if(this.showFamiliar) {
        this.model.familiars.fetch();
      }
      this.render();
    },

    getRenderData: function() {
      var data = this.model.toJSON();
      // Add flag to render the familiars information.
      data._showFamiliar = this.showFamiliar;
      return data;
    }
  });
  
  return UserDetail;
});